<!-- html5标准的文档类型 -->
<!DOCTYPE html>
<!-- zh-CN  en -->
<html lang="zh-CN">
  <head>
      <!-- 编码方式 utf-8 -->
    <meta charset="utf-8">
    <!-- 使用最新的ie标准 或者 模式 来渲染我们的页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 适配 移动端  -->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>模板</title>

    <!-- Bootstrap -->
    <!-- 加载 bootstrap 核心样式表 -->
    <link href="./lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!-- lt less then -->
    <!--[if lt IE 9]>
      <script src="./lib/html5shiv/html5shiv.min.js"></script>
      <script src="./lib/respond/respond.min.js"></script>
    <![endif]-->
  </head>
  <style>
    .mobileImg{
      display: block;
      width: 100%;
    }
    .mobileImg > img {
      display: block;
      width: 100%;
    }
  </style>
  <body>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators 指示器  就是轮播图中间的小圆点-->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
      </ol>
    
      <!-- Wrapper for slides 就是 轮播图里面的 图片容器 -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <!-- 移动端轮播图 -->
          <a href="#" class="mobileImg">
            <img src="./images/slide_01_640x340.jpg" alt="...">
          </a>
         
        </div>
        <div class="item">
          <a href="#" class="mobileImg">
            <img src="./images/slide_02_640x340.jpg" alt="...">
          </a>
        </div>
        <div class="item">
          <a href="#" class="mobileImg">
            <img src="./images/slide_03_640x340.jpg" alt="...">
          </a>
        </div>
        <div class="item">
          <a href="#" class="mobileImg">
            <img src="./images/slide_04_640x340.jpg" alt="...">
          </a>
        </div>
      
      </div>
    
      <!-- Controls 左右箭头 -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./lib/jquery/jquery-3.4.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>